<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 70%;
            height: 600px;
            margin: 20px auto;

            box-sizing: border-box;
        }

        .left {
            width: 75%;
            height: 600px;
            border: 1px solid #ccc;
            box-sizing: border-box;


        }

        .right {
            width: 25%;
            height: 600px;

            box-sizing: border-box;
            background-color: #ccc;


        }

        .clearfix:after {
            display: block;
            content: "";
            clear: both;
        }

        .fl {
            float: left;
        }

        .content {

            height: 75%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            overflow: auto;

        }

        .sendiv {
            height: 25%;
        }

        .sendmsg {
            width: 85%;
            height: 100%;
            box-sizing: border-box;
            outline: none;
            padding: 10px;
        }

        .sendbtn {
            width: 15%;
            height: 100%;
            border-left: 1px solid #999;
            box-sizing: border-box;
            text-align: center;
            line-height: 150px;
            cursor: pointer;
        }

        h1 {
            text-align: center;
        }

        .student {
            text-align: center;
        }

        .msg {
            background-color: white;
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1 id="h1"></h1>
    <div class="box  clearfix">
        <div class="left fl">
            <div class="content" id="cnt">


            </div>
            <div class="sendiv  clearfix">
                <div class="sendmsg  fl" id="msg  " contenteditable="true">


                </div>
                <div class="sendbtn  fl" id="sendbtn">

                    发送

                </div>



            </div>






        </div>
        <div class="right  fl" id="students">




        </div>

    </div>
    <script src="jquery.js"></script>
    <script>
        if (!localStorage.userInfo) {
            location = "login.html";
        }
        var userInfo = JSON.parse(localStorage.userInfo);
        h1.innerHTML = "欢迎你" + userInfo.name;
        $.post(" https://java60.hfbdqn.cn/find_all_student ", {},
            function (data) {
                for (var i = 0; i < data.length; i++) {
                    var d = data[i];
                    var d1 = document.createElement("div");
                    d1.innerHTML = d.name + "在线";

                    d1.className = "student";
                    students.appendChild(d1);
                }
            }
        )
        sendbtn.onclick = function () {
            $.post("https://java60.hfbdqn.cn/addChatMsg",
                { content: msg.innerHTML, token: userInfo.token },
                function (data) {
                    var msgInfo = data;
                    msg.innerHTML = "";



                    cnt.innerHTML = "";
                    var divs = students.getElementByTagName("div");
                    $.get("https://java60.hfbdqn.cn/find_all_chat_msg", {},
                        function (mdata) {
                            mdata = mdata.reverse();
                            for (var i = 0; i < mdata.length; i++) {
                                var m = mdata[i];


                                var msgDiv = document.createElement("div");
                                msgDiv.innerHTML = m.wechatStudent.name + ":" + m.content;

                                msgDiv.className = msg;

                                for (let j = 0; j < divs.length; j++) {
                                    if (divs[j].innerHTML.indexof(m.wechatStudent.name) != -1) {
                                        divs[j].style.color = "red";

                                    }



                                }
                                cnt.appendChild(msgDiv);
                            }
                        }
                    )

                }



            )
        }
        setInterval(loadData, 1000);







    </script>


</body>

</html>